<template>
  <button
    class="container"
    :class="[`type-${type}`, `size-${size}`]"
    :style="{ width: width }"
    @click="onClickListener"
  >
    <!-- :class="[`type-${type}`]"
      :class="['type'+type]"-->
    <slot></slot>
    <i :class="`iconfont ${icon}`" v-show="true"></i>
  </button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "default",
    },
    size: {
      type: String,
      default: "default",
    },
    width: {
      default: "",
    },
    icon: {
      type: String,
      default: "icon-dianji",
    },
    showIcon: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    onClickListener() {
      this.$emit("click");
    },
  },
};
</script>

<style scoped>
.container {
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  margin-right: 5px;
  border: 0px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
.type-default {
  background: #409eff;
}
.type-danger {
  background: #f56c6c;
}
.type-success {
  background: #67c23a;
}
.type-warning {
  background: #e6a23c;
}
.type-info {
  background: #909399;
}

.type-default:hover,
.type-danger:hover,
.type-success:hover,
.type-warning:hover,
.type-info:hover {
  opacity: 0.7;
}

.size-default {
  padding: 5px 10px;
  font-size: 14px;
}

.size-small {
  padding: 3px 6px;
  font-size: 10px;
}

.size-big {
  padding: 8px 16px;
  font-size: 18px;
}
</style>